<template>
	<view>
		<view v-for="item in list" :key="item.id">
			<!-- 广告 -->
			<view class="adv_box" @click="goAdvUrl(item)" v-if="item.identifying">
				<u-image border-radius="10" height="280" mode="aspectFill" :src="item.image"></u-image>
				<view class="u-color-white u-p-l-18 u-p-r-18 u-p-t-4 u-p-b-4 u-absolute o_adv_tip u-font-22">推广</view>
			</view>
			<!-- 酒局 -->
			<view class="tea_box" @click="goTeaDetail(item)" v-else>
				<view>
					<view class="tea_left_ava">
						<u-image width="140rpx" height="140rpx" border-radius="20"
							:src="item.user.head_img"></u-image>
					</view>
					<!-- <view class="u-text-center u-font-24 u-m-t-15 number_box">
						<view class="u-font-bold u-font-26">{{item.user.number}}</view>
						<view class="u-font-23 u-m-l-10">能量值</view>
					</view> -->
					<view class="recommend_font" v-if="item.is_top == 1">推荐酒局</view>
				</view>
				<view class="u-m-l-20 u-font-desc u-flex-1">
					<view class="u-p-b-10 u-flex u-row-between u-line-bottom">
						<view class="u-flex">
							<view class="u-m-r-10">
								<span class="u-font-34 u-font-bold u-color-puce">{{ item.user.name }}</span>
								<span class="u-m-l-10" v-if="item.user.is_authentication == 2">
									<u-icon size="32" color="#FB6316" name="renzheng" custom-prefix="custom-icon" />
								</span>
								<span class="u-m-l-10" v-if="item.user.is_company_user == 1">
									<u-icon size="32" color="#F8494D" name="qiye1" custom-prefix="custom-icon" />
								</span>
							</view>
							<view class="u-tag-box" :class="item.user.president_class" v-if="item.user.president_class">
								{{ getPresidentName(item.user.partner_status,item.user.president_status) }}
							</view>
						</view>
						<view class="u-color-gray u-font-24" v-if="[1].includes(item.tea_status) && isDistance">
							<view v-if="item.distance == '0m'">无法获取距离</view>
							<view class="u-flex" v-else>
								<u-icon name="map" size="28"></u-icon>
								<view class="u-m-l-5">
									<span>距您</span>
									<span v-if="item.distance == '100.00km'">超过</span>
									<span>{{item.distance}}</span>
								</view>
							</view>
						</view>
					</view>
					<view class="u-p-t-10 u-p-b-5 u-font-28 u-font-bold u-color-puce" v-if="item.des">
						<span>{{item.theme.name}}：{{item.des}}</span>
					</view>
					<view class="u-m-t-10 u-flex u-col-top">
						<u-icon name="clock-fill" color="#B97B48" size="32"></u-icon>
						<view class="u-m-l-10 u-font-26">{{ item.starting_time }}</view>
					</view>
					<view class="u-m-t-10 u-flex u-col-top">
						<u-icon name="map-fill" color="#B97B48" size="32"></u-icon>
						<view class="u-m-l-10 u-font-26">{{ item.address }}</view>
					</view>
					<!-- <view class="u-m-t-10 u-flex">
						<view class="u-m-r-10">
							<span class="u-color-gray">青创私董：</span>
							<span>{{ item.user.name }}</span>
							<span class="u-m-l-10" v-if="item.user.is_authentication == 2">
								<u-icon size="32" color="#FB6316" name="renzheng" custom-prefix="custom-icon" />
							</span>
							<span class="u-m-l-10" v-if="item.user.is_company_user == 1">
								<u-icon size="32" color="#F8494D" name="qiye1" custom-prefix="custom-icon" />
							</span>
						</view>
						<view class="u-tag-box" :class="item.user.president_class" v-if="item.user.president_class">
							{{ getPresidentName(item.user.president_status) }}
						</view>
					</view> -->
					<view class="u-m-t-10 u-flex u-col-top u-color-puce">
						<u-icon name="rmb-circle-fill" color="#B97B48" size="32"></u-icon>
						<!-- <view class="u-m-l-10 u-font-26">{{ item.pay_type > 1 ? item.pay_name + '元/人': item.pay_name }} </view> -->
						<view class="u-m-l-10 u-font-26">{{ item.price_two || 0 }}元/人</view>
					</view>
					<view class="u-m-t-10 u-flex u-flex-wrap" v-if="item.label[0]">
						<view class="u-color-green u-m-r-10" v-for="(labelItem,labelIndex) in item.label"
							:key="labelIndex" @click.native.stop="goSearch(labelItem)">#{{labelItem}}</view>
					</view>
					<view class="u-border-top u-p-t-15 u-m-t-20 u-flex u-row-between">
						<!-- <view class="u-flex">
							<u-icon name="star-fill" color="#F96257"></u-icon>
							<view class="u-m-l-10 u-color-gray">人气{{item.view_number}}</view>
						</view> -->
						<view class="u-flex" :class="[5].includes(item.tea_status) && isBureau ? 'u-width-100' : ''">
							<view class="u-m-l-10 u-flex-1" v-if="isPoint || isBureau">
								<view class="tea_right_tag" v-if="item.tea_status == 1">报名中</view>
								<view class="tea_gray_tag" v-else-if="item.tea_status == 3">已截止</view>
								<view class="u-flex u-row-between" v-else-if="item.tea_status == 5">
									<view class="tea_right_role">已结束</view>
									<view class="u-m-l-10 u-font-bold">第{{item.identifier}}场酒局</view>
								</view>
								<view class="tea_gray_tag" v-else-if="item.tea_status == 7">已失效</view>
							</view>
						</view>
						<view class="u-nowrap u-m-l-10" v-if="isPoint">
							<span class="u-color-gray" @click="goPointDetail(item.id,item.user_id)">查看评价 ></span>
						</view>
						<view class="u-nowrap u-m-l-10" v-else-if="isBureau && item.tea_status == 1">
							<span class="u-color-gray" @click="goPointDetail(item.id,item.user_id)">查看酒局 ></span>
						</view>
						<view class="u-width-100" v-if="!isBureau && !isPoint">
							<view class="u-flex u-row-between" v-if="item.tea_status == 1">
								<view class="people_box">
									<u-icon name="haoyou-mianxing" color="#B3723E" custom-prefix="custom-icon"
										size="34"></u-icon>
									<view class="u-color-puce u-m-l-5">{{ item.number - item.end_num }} /
										{{ item.number}} </view>
								</view>
								<view class="join_box">马上加入</view>
								<!-- <view v-if="item.end_num > 0">
									<span class="u-color-red">仅限{{item.end_num}}个名额，</span>
									<span class="u-color-gray">马上报名 ></span>
								</view>
								<view class="u-color-gray" v-else>人数已满 ></view> -->
							</view>
							<view class="tea_gray_tag" @click.stop="goScore(item)" v-else-if="item.tea_status == 3">已截止</view>
							<view class="tea_right_role" @click.stop="goScore(item)" v-else-if="item.tea_status == 5">第{{item.identifier}}场酒局 已结束</view>
							<view class="tea_gray_tag" @click.stop="goScore(item)" v-else-if="item.tea_status == 7">已失效</view>
						</view>
					</view>
					<view></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		PresidentLevel,
    TeaStatus,
		presidentClass
	} from '@/utils/index.js'
	export default {
		props: {
			list: {
				type: Array
			},
			/* 评分 */
			isPoint: {
				type: Boolean,
				default: false
			},
			/* 我的酒局列表 */
			isBureau: {
				type: Boolean,
				default: false
			},
			/* 显示距离 */
			isDistance: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			getPresidentClass(num) {
				return presidentClass(num)
			},
			goAdvUrl(val) {
				this.$emit("goAdvUrl", val)
			},
			goTeaDetail(val) {
				this.$emit("goTeaDetail", val)
			},
			goScore(val) {
				this.$emit("goScore", val)
			},
			goPointDetail(teaId, id) {
				const data = {
					teaId: teaId,
					id: id
				}
				this.$emit("goPointDetail", data)
			},
			goSearch(val) {
				this.$emit("goSearch", val)
			},
			getPresidentName(status1, status2) {
				// return PresidentLevel(status1, status2)
				return TeaStatus(status1, status2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.adv_box {
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.tea_box {
		display: flex;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		// box-shadow: 0px 0px 5rpx 0px rgba(0, 0, 0, 0.2);

		.tea_left_ava {
			position: relative;

			.tea_left_dec {
				position: absolute;
				bottom: 5px;
				font-size: 20rpx;
				left: 20rpx;
				color: #fff;
			}
		}

		.number_box {
			background: #FF5B01;
			color: #fff;
			padding: 11rpx 20rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.people_box {
			background: #fff;
			color: #B3723E;
			padding: 6rpx 18rpx;
			border: 1rpx solid #B3723E;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
		}

		.join_box {
			color: #fff;
			font-size: 26rpx;
			padding: 8rpx 26rpx;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(to bottom, #E6BF91, #B67642);
		}

		.recommend_font {
			margin-top: 10rpx;
			color: #E86C5E;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
		}
	}

	.tea_right_tag {
		background: #2C76ED;
		color: #fff;
		border-radius: 8rpx;
		padding: 8rpx 15rpx;
		font-size: 24rpx;
		display: inline-block;
	}

	.tea_right_role {
		background: #E86C5E;
		color: #fff;
		border-radius: 8rpx;
		padding: 8rpx 15rpx;
		font-size: 24rpx;
		display: inline-block;
	}

	.tea_gray_tag {
		background: #868B9A;
		color: #fff;
		border-radius: 8rpx;
		padding: 8rpx 15rpx;
		font-size: 24rpx;
		display: inline-block;
	}

	.o_adv_tip {
		box-shadow: 0px 5rpx 10rpx 3rpx rgba(153, 153, 153, 0.24);
		top: 20px;
		right: 20px;
		border-radius: 8rpx;
		background: #999;
	}
</style>